<template>
<div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>

    <el-steps 
     finish-status="success"
    :active="active" 
    process-status="wait" 
    align-center 
    style="margin-bottom: 40px;">
        <el-step title="填写课程基本信息" />
        <el-step title="创建课程大纲" />
        <el-step title="最终发布" />
    </el-steps>

    <!-- 步骤内容 -->
    <!-- step1  info -->
    <info v-if="active === 0" />
    <!-- step2  chapter index -->
    <chapter v-if="active === 1"  />
    <!-- step3  publish -->
    <publish v-if="active === 2 || active === 3"  />
</div>
</template>

<script>
//引入子组件
import Info from '@/views/course/components/info'
import Chapter from '@/views/course/components/chapter'
import Publish from '@/views/course/components/publish'
export default {
    components:{ Info, Chapter, Publish },//注册子组件
    data() {
        return {
            active:0,
            courseId:'',
        }
    },
    created() {
        //通过获取路由名称，判断进入那个步骤
        if(this.$route.name === 'CourseInfoEdit'){
            this.active = 0
            this.courseId = this.$route.params.id
        }
        if(this.$route.name === 'ChapterInfoEdit'){
            this.active = 1
            this.courseId = this.$route.params.id
        }
    },
}
</script>